<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度一下</title>
    <style>
        html{
            height: 100%;
        }
        body{
            /*设置元素高度*/
            height: 100%;
            /*设置外间距*/
            margin: 0;
        }
        #bg{
            width: 100%;
            height: 100%;
            /*背景颜色*/
            /*background-color: red;*/
            /*背景图片*/
            background-image: url(caodi.png);
            /*背景尺寸*/
            background-size: 100% 100%;
        }
        #f1{
            width: 26%;
            left: 20.8%;
            top: 25%;
        }
        #f2{
            width: 15%;
            left: 43.7%;
            top: 61%;
        }
        #f3{
            width: 20%;
            left: 55.7%;
            top: 48%;
        }
        .fc{
            /*定位方式：绝对定位*/
            position: absolute;
            /*动画名称*/
            animation-name: spin;
            /*单次动画执行时间,ms表示毫秒,s表示秒*/
            animation-duration: 2000ms;
            /*动画执行次数。infinite表示无穷的*/
            animation-iteration-count: infinite;
            /*动画执行速率，默认为先加速后减速，linear*/
            /*表示匀速*/
            animation-timing-function: linear;
        }

        @keyframes spin{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }

        /*:hover表示鼠标悬停在元素上时触发的效果*/
        #f1:hover{
            animation-duration: 1s;
        }

        #f2:hover{
            /*动画状态：暂停*/
            animation-play-state: paused;
        }

        /*鼠标左键按下时的状态*/
        #f3:active{
            /*动画方向*/
            animation-direction: alternate-reverse;
        }
        
    </style>
</head>

<body>
    <div id="bg">
        <img src="fengche.png" id="f1" class="fc">
        <img src="fengche.png" id="f2" class="fc">
        <img src="fengche.png" id="f3" class="fc">
    </div>
</body>


</html>